/* Custom styles for the investment prognosis calculator */

    /* S&P Wealth Management fargevariabler (offisiell palett) */
    :root {
        --sp-background: #F5F3F3;   /* Light Grey */
        --sp-foreground: #333333;   /* Coal */
        --sp-dark-blue: #002359;    /* Dark Blue */
        --sp-blue: #002D72;         /* Blue */
        --sp-cyan-40: #99D9F2;      /* Cyan 40 */
        --sp-cyan-20: #CCECF9;      /* Cyan 20 */
        --sp-border: #CECCCC;       /* Outline border */
        --thumb-color: #99D9F2;     /* Sliders og interaksjoner */
        /* Samme farge som fanetekst (Risikosimulering m.fl.) og panel-tittel «Mål og behov» */
        --tab-and-title-color: #4a5568;
    }

    /* Typography: Whitney setup according to spec */
    @font-face { font-family: 'Whitney'; src: local('Whitney Black'), local('Whitney-Black'), local('Whitney Black Regular'); font-style: normal; font-weight: 900; font-display: swap; }
    @font-face { font-family: 'Whitney'; src: local('Whitney Bold'), local('Whitney-Bold'); font-style: normal; font-weight: 700; font-display: swap; }
    @font-face { font-family: 'Whitney'; src: local('Whitney Medium'), local('Whitney-Medium'); font-style: normal; font-weight: 500; font-display: swap; }
    @font-face { font-family: 'Whitney'; src: local('Whitney Book'), local('Whitney-Book'), local('Whitney Light'); font-style: normal; font-weight: 400; font-display: swap; }
    @font-face { font-family: 'Whitney'; src: local('Whitney Medium Italic'), local('Whitney-MediumItalic'); font-style: italic; font-weight: 500; font-display: swap; }

    /* Base font */
    body,
    .font-sans {
        font-family: 'Whitney', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
        font-weight: 400;
        line-height: 1.5;
        background-color: var(--sp-background);
        color: var(--sp-foreground);
    }

    /* Headings (Overskrifter) */
    :root { --heading-scale: 0.42; --label-scale: 0.7; }
    .typo-h1 { font-family: 'Whitney', sans-serif; font-weight: 900; font-size: clamp(calc(3rem * var(--heading-scale)), calc(6vw * var(--heading-scale)), calc(6.8rem * var(--heading-scale))); line-height: 1.1; letter-spacing: 0; }
    .typo-h2 { font-family: 'Whitney', sans-serif; font-weight: 900; font-size: clamp(calc(1.125rem * var(--heading-scale)), calc(3.5vw * var(--heading-scale)), calc(5rem * var(--heading-scale))); line-height: 1.15; letter-spacing: 0; }
    .typo-h3 { font-family: 'Whitney', sans-serif; font-weight: 700; font-size: clamp(calc(0.875rem * var(--heading-scale)), calc(1.3vw * var(--heading-scale)), calc(1.375rem * var(--heading-scale))); line-height: 1.25; letter-spacing: 0; }
    .typo-h4 { font-family: 'Whitney', sans-serif; font-weight: 700; font-size: calc(1rem * var(--heading-scale)); line-height: 1.35; letter-spacing: 0; }

    /* Align headings consistently inside panels */
    .panel h1,
    .panel h2,
    .panel .typo-h1,
    .panel .typo-h2 { margin-top: 0; }

    /* Panel-tittel «Mål og behov» – samme farge som fanetekst (én kilde: --tab-and-title-color) */
    .maal-panel-title,
    .maal-panel-title.typo-h1 { color: var(--tab-and-title-color) !important; }
    .maal-panel-title-editable { border-color: var(--tab-and-title-color) !important; color: var(--tab-and-title-color) !important; }

    /* Tekstelementer */
    .typo-label {
        font-family: 'Whitney', sans-serif;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: calc(1rem * var(--label-scale));
    }
    .typo-preamble { font-family: 'Whitney', sans-serif; font-weight: 400; font-size: clamp(1rem, 1.5vw, 1.25rem); text-indent: 1.5em; }
    .typo-paragraph { font-family: 'Whitney', sans-serif; font-weight: 400; font-size: clamp(0.875rem, 1vw, 1rem); }
    .typo-quote { font-family: 'Whitney', sans-serif; font-style: italic; font-weight: 500; font-size: clamp(1.125rem, 2vw, 1.5rem); }
    .typo-quote-author { font-weight: 700; }
    .typo-quote-title { font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; }

    /* Slider thumb styles */
    input[type="range"]::-webkit-slider-thumb {
        appearance: none;
        width: 20px;
        height: 20px;
        background: var(--thumb-color, #99D9F2);
        border-radius: 50%;
        border: 2px solid white;
        cursor: pointer;
    }

    input[type="range"]::-moz-range-thumb {
        width: 20px;
        height: 20px;
        background: var(--thumb-color, #66CCDD);
        border-radius: 50%;
        border: 2px solid white;
        cursor: pointer;
    }

    /* Event row slider styles */
    .event-slider::-webkit-slider-thumb {
        width: 16px;
        height: 16px;
        background: var(--sp-cyan-40);
        border-radius: 50%;
        cursor: pointer;
        appearance: none;
    }

    .event-slider::-moz-range-thumb {
        width: 16px;
        height: 16px;
        background: var(--sp-cyan-40);
        border-radius: 50%;
        cursor: pointer;
    }

    /* Button hover effects */
    .hover-lift:hover {
        transform: translateY(-2px);
        transition: transform 0.2s ease-in-out;
    }

    /* Chart container styles */
    .chart-container {
        position: relative;
        height: 500px;
    }

    .allocation-chart-container {
        position: relative;
        height: 300px;
    }

    .capital-chart-container {
        position: relative;
        height: 300px;
    }

    /* Panel styles – lekker skygge på hvite containere */
    .panel {
        background: #ffffff;
        border: 1px solid var(--sp-border);
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08), 0 6px 32px rgba(0, 0, 0, 0.06);
    }

    /* Alle containere i Mål og behov – lekker skygge (subtil, myk, jevn) */
    .maal-og-behov-tab [class*="bg-white"][class*="rounded"]:not([class*="shadow-2xl"]) {
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08), 0 6px 32px rgba(0, 0, 0, 0.06);
    }
    .maal-og-behov-tab [class*="bg-gray-50"][class*="rounded"] {
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08), 0 6px 32px rgba(0, 0, 0, 0.06);
    }
    .maal-og-behov-tab button[class*="rounded-lg"],
    .maal-og-behov-tab button[class*="rounded-md"],
    .maal-og-behov-tab button[class*="rounded-xl"],
    .maal-og-behov-tab button[class*="rounded-full"],
    .maal-og-behov-tab button[class*="rounded-2xl"] {
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08), 0 6px 32px rgba(0, 0, 0, 0.06);
    }
    .maal-og-behov-tab input[class*="bg-white"],
    .maal-og-behov-tab input[class*="rounded"] {
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08), 0 6px 32px rgba(0, 0, 0, 0.06);
    }

    /* Grid layout */
    .grid-3-cols {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    @media (min-width: 1280px) {
        .grid-3-cols {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    /* Form input styles – lekker skygge */
    .form-input {
        background: #ffffff;
        border: 1px solid var(--sp-border);
        border-radius: 6px;
        padding: 6px 12px;
        color: var(--sp-foreground);
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08), 0 6px 32px rgba(0, 0, 0, 0.06);
    }

    .form-input:focus {
        outline: none;
        border-color: var(--sp-cyan-40);
        box-shadow: 0 0 0 2px rgba(153, 217, 242, 0.25);
    }

    /* Button styles – i tråd med manualen */
    .btn-primary {
        background: var(--sp-blue);
        color: var(--sp-cyan-40);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        padding: 8px 20px;
        border-radius: 8px;
        border: none;
        transition: all 0.2s ease-in-out;
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    }

    .btn-primary:hover {
        background: var(--sp-dark-blue);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
    }

    /* Outline-variant iht. manual: 1px ramme, Coal tekst */
    .btn-secondary {
        background: transparent;
        border: 1px solid var(--sp-border);
        color: var(--sp-foreground);
        padding: 10px 18px;
        border-radius: 8px;
        transition: all 0.2s ease-in-out;
        box-shadow: none;
        font-weight: 500;
    }

    .btn-secondary:hover {
        background: var(--sp-cyan-20);
        transform: translateY(-1px);
    }

    .btn-secondary.active {
        background: var(--sp-cyan-40);
        color: #ffffff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    /* Event row styles – lekker skygge */
    .event-row {
        background: var(--sp-cyan-20);
        border: 1px solid var(--sp-border);
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07), 0 4px 24px rgba(0, 0, 0, 0.05);
    }

    .event-slider-track {
        position: relative;
        width: 100%;
        height: 6px;
        background: #DDDDDD;
        border-radius: 3px;
    }

    .event-slider-highlight {
        position: absolute;
        height: 6px;
        background: var(--sp-cyan-40);
        border-radius: 3px;
        top: 50%;
        transform: translateY(-50%);
    }

    .event-year-label {
        position: absolute;
        font-size: 12px;
        color: #666666;
        bottom: -20px;
        transform: translateX(-50%);
    }

    /* Legend styles */
    .legend-container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 24px 12px;
        margin-top: 16px;
        color: rgba(51, 51, 51, 0.9);
        font-size: 14px;
    }

    .legend-item {
        display: flex;
        align-items: center;
    }

    .legend-color {
        width: 16px;
        height: 16px;
        border-radius: 2px;
        margin-right: 8px;
    }

    /* Responsive adjustments */
    @media (max-width: 640px) {
        .panel {
            padding: 16px;
        }
        
        .chart-container {
            height: 400px;
        }
        
        .allocation-chart-container,
        .capital-chart-container {
            height: 250px;
        }
    } 

    /* Output modal extras */
    .output-textarea {
        font-family: 'Whitney', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
        font-size: 0.95rem;
        line-height: 1.6;
        transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .output-textarea:focus {
        border-color: var(--sp-cyan-40);
        box-shadow: 0 0 0 3px rgba(153, 217, 242, 0.35);
    }

    .copy-btn {
        transition: transform 0.12s ease, background-color 0.2s ease, box-shadow 0.2s ease;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    .copy-btn:hover {
        transform: translateY(-1px);
    }

    .copy-btn:active {
        transform: translateY(0);
    }

    /* Sleek column styles with smooth animations */
    .column-container {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .column-container:hover {
        transform: translateY(-4px);
    }

    /* Smooth gradient transitions */
    .column-gradient {
        transition: background 0.3s ease;
    }

    /* Enhanced shadow effects for columns */
    .column-shadow {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    .column-shadow:hover {
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    /* Premium column styles with glassmorphism and 3D effects */
    .premium-column {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transform-style: preserve-3d;
        perspective: 1000px;
        will-change: transform, box-shadow;
    }

    /* 3D perspective container */
    .perspective-1000 {
        perspective: 1000px;
        transform-style: preserve-3d;
    }

    /* Smooth transitions for all interactive elements */
    .premium-column {
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Enhanced glow effects */
    @keyframes pulse-glow {
        0%, 100% {
            opacity: 0.4;
        }
        50% {
            opacity: 0.7;
        }
    }

    /* Add subtle pulse to columns on load */
    .premium-column {
        animation: fadeInScale 0.6s ease-out;
    }

    @keyframes fadeInScale {
        from {
            opacity: 0;
            transform: scale(0.95) translateY(10px);
        }
        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    /* Enhanced modal background with subtle patterns */
    .modal-column-container {
        position: relative;
    }

    .modal-column-container::before {
        content: '';
        position: absolute;
        inset: 0;
        background: 
            radial-gradient(circle at 25% 25%, rgba(102, 204, 221, 0.06) 0%, transparent 50%),
            radial-gradient(circle at 75% 75%, rgba(74, 109, 140, 0.04) 0%, transparent 50%);
        pointer-events: none;
        z-index: 0;
    }

    /* Improve text readability on columns */
    .premium-column span {
        letter-spacing: 0.02em;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Subtle border glow on hover */
    .premium-column:hover::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: inherit;
        background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.2));
        z-index: -1;
        filter: blur(8px);
        opacity: 0.7;
    }

    /* Browser-like tab styles – premium med halo */
    .tab-container {
        display: flex;
        flex-direction: column;
        height: 100vh;
        width: 100%;
    }

    .tab-bar {
        display: flex;
        align-items: flex-end;
        background: linear-gradient(180deg, var(--sp-background) 0%, #E8EAEE 100%);
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        padding: 0 12px 0 14px;
        gap: 4px;
        overflow-x: auto;
        min-height: 48px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .tab {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 18px;
        background: linear-gradient(180deg, #E4E6EA 0%, #D8DCE2 100%);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-bottom: none;
        border-radius: 10px 10px 0 0;
        cursor: pointer;
        user-select: none;
        min-width: 120px;
        max-width: 240px;
        position: relative;
        transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 14px;
        font-weight: 500;
        color: var(--tab-and-title-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    .tab::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.28s ease;
    }

    .tab:first-child {
        margin-left: 0;
    }

    /* Aktiv fane – bruker S&P blåtoner */
    .tab.active {
        background: linear-gradient(180deg, var(--sp-blue) 0%, var(--sp-dark-blue) 100%);
        border-color: rgba(0, 35, 89, 0.65);
        border-bottom-color: transparent;
        z-index: 2;
        color: #ffffff;
        font-weight: 600;
        box-shadow:
            0 -2px 0 0 var(--sp-dark-blue),
            0 4px 20px -4px rgba(0, 35, 89, 0.45),
            0 8px 32px -8px rgba(0, 35, 89, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    .tab.active::before {
        opacity: 1;
        box-shadow: inset 0 0 24px 2px rgba(255, 255, 255, 0.08);
    }

    /* Inaktiv fane – hover-halo */
    .tab:not(.active) {
        background: linear-gradient(180deg, #E4E6EA 0%, #D8DCE2 100%);
    }

    .tab:not(.active):hover {
        background: linear-gradient(180deg, #F0F2F6 0%, #E2E6EC 100%);
        border-color: rgba(0, 0, 0, 0.1);
        box-shadow:
            0 2px 8px -2px rgba(0, 0, 0, 0.08),
            0 4px 16px -4px rgba(0, 45, 114, 0.18);
    }

    .tab-content {
        flex: 1;
        overflow: auto;
        background: white;
    }

    .tab-content.hidden {
        display: none;
    }

/* Sidestilt verktøyknapp (sim / Sp. / Utb. / Port.): tydelig aktiv ramme.
   Tailwind ring + shadow-lg på samme knapp konkurrerer om box-shadow, så ringen kan forsvinne. */
.maal-og-behov-tab button.mbh-side-tool-active {
    outline: 5px solid #0057ff;
    outline-offset: 4px;
    z-index: 2;
}